<template>
    <div id="map" class="mapC"></div>
</template>

<script>
import 'ol/ol.css'
import GPX from 'ol/format/GPX'
import Map from 'ol/Map'
import VectorSource from 'ol/source/Vector'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
export default {
  name: 'index',
  data () {
    return {
      map: null,
      vector: null,
      style: null,
      raset: null,
      raset1: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      this.style = {
        'Point': new Style({
          image: new CircleStyle({
            fill: new Fill({
              color: 'rgba(255,255,0,0.4)'
            }),
            radius: 5,
            stroke: new Stroke({
              color: '#385eff',
              width: 1
            })
          })
        }),
        'LineString': new Style({
          stroke: new Stroke({
            color: '#f00',
            width: 3
          })
        }),
        'MultiLineString': new Style({
          stroke: new Stroke({
            color: '#0bc7ff',
            width: 3
          })
        })
      }
      this.vector = new VectorLayer({
        source: new VectorSource({
          url: 'zlocal/data/gpx/fells_loop.gpx',
          format: new GPX()
        }),
        style: (feature) => {
          return this.style[feature.getGeometry().getType()]
        }
      })
      this.raset = new TileLayer({
        name: 'map',
        title: 'map',
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png'
        })
      })
      this.raset1 = new TileLayer({
        name: 'map1',
        title: 'map1',
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png'
        })
      })
      this.map = new Map({
        layers: [this.raset, this.raset1, this.vector],
        target: 'map',
        view: new View({
          center: [-7916041.528716288, 5228379.045749711],
          zoom: 12
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
